import React, { useEffect, useRef, useState } from 'react'
import axios from 'axios'
import PubSub from 'pubsub-js'

export default function Main() {
  // 状态数据
  const [firstView, setFirstView] = useState(true) // 是否显示初始页面
  const [loading, setLoading] = useState(false) // 是否存在请求中
  const [errorMsg, setErrorMsg] = useState('') // 需要显示的错误信息
  const [users, setUsers] = useState([]) // 搜索得到用户列表
  // user的结构: {name, avatar_url, url}
  
  // 初始化订阅搜索的消息
  useEffect(() => {
    PubSub.subscribe('search', async (msgName, keyword) => {
      // 发请求前, 更新数据
      setFirstView(false)
      setLoading(true)

      try {
        // 发请求获取数据
        const response = await axios({
          url: '/search/users',
          params: {q: keyword}
        })
        // login / avatar_url / html_url
        // 读取数据
        const users = response.data.items.map(item => ({
          name: item.login, 
          avatar_url: item.avatar_url, 
          url: item.html_url
        }))
        // 更新
        setLoading(false)
        setUsers(users)
      } catch (error) {
        // 更新
        setLoading(false)
        setErrorMsg(error.message)
      }
    })
  }, [])

  if (firstView) {
    return <h2>请输入关键字进行搜索</h2>
  } else if (loading) {
    return <h2>请求中...</h2>
  } else if (errorMsg) {
    return <h2>{errorMsg}</h2>
  }
  return (
    <div className="row">
      {
        users.map(user => (
          <div className="card" key={user.name}>
            <a href={user.url} target="_blank" rel="noreferrer">
              <img src={user.avatar_url} alt="" style={{width: 100}} />
            </a>
            <p className="card-text">{user.name}</p>
          </div>
        ))
      }
    </div>
  )
}
